<template>
	<view class="top-content">
		<view class="index-top">
			<image class="top-logo" src="/static/logo.png"></image>
			<text class="top-name">大健康产品超市</text>
			<view class="top-day">
				<view>{{nowDate.day}}</view>
				<view>{{nowDate.date}}</view>
			</view>
			<view class="top-time">{{nowDate.time}}</view>
		</view>


	</view>
</template>

<script setup lang="ts">
	import { onMounted,reactive } from 'vue';
	import { format, } from '@/common/util/util';
	onMounted(() => {
		setTopTimeTimer()
	})
	const nowDate = reactive({
		day: '',
		date: '',
		time: ''
	})
	const setTopTimeTimer = () => {
		getNowTime()
		setInterval(() => {
			getNowTime()
		}, 10000)
	}
	const getNowTime = () => {
		// 创建Date对象
		const date = new Date();
		// 获取星期索引（0-6，0代表星期日）
		const dayIndex = date.getDay();
		// 定义星期数组（可根据需要调整语言）
		const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
		// 获取对应的星期名称
		const currentWeekday = weekdays[dayIndex];
		nowDate.day = currentWeekday
		nowDate.date = format(date, 'yyyy/MM/dd')
		nowDate.time = format(date, 'hh:mm')


	}
</script>

<style lang="scss">
	.top-content {
		.index-top {
			display: flex;
			align-items: center;
			padding: 0 15rpx;
			height: 100rpx;

			.top-logo {
				width: 80rpx;
				height: 80rpx;

			}

			.top-name {
				font-size: 30rpx;
				font-weight: bold;
				color: #1e1e1e;
				flex-grow: 1;
				margin-left: 10rpx;
			}

			.top-day {
				font-size: 20rpx;
				margin-right: 10rpx;
				text-align: right;
			}

			.top-time {
				font-size: 50rpx;
				font-weight: bold;
				color: #3f3f3f;
			}
		}
	}
</style>